<!doctype html>
<html  lang="zh-CN">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
	<title><@spring.message "admin.system.title"/></title>

    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" />
    <link rel="stylesheet" type="text/css" href="lib/ztree/css/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" type="text/css" href="lib/ueditor/dialogs/image/image.css" />

    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/swiss.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.validator.css" />
    <link id="theme" rel="stylesheet" type="text/css" href="css/themes/default.css" />
    <link rel="stylesheet" href="lib/datepicker/css/datepicker.css" type="text/css" />
    <link rel="stylesheet" href="lib/datepicker/css/layout.css" media="screen" type="text/css" />

    <!-- highlight.js CSS -->
<!--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">-->

    <link rel="stylesheet" href="lib/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">
    <script src="lib/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>

    <script type="text/javascript">
    function showAiModelSelect() {
        $('#aiModelModal').modal()
    }

     window.UEDITOR_HOME_URL = "/admin/lib/ueditor/";
     window.BASE_URL = '${url}';
    </script>
   	
</head>

<body>

<!-- 头部 高55px -->
<div id="admin_top" class="layout_style_top">
    <div id="logo" class="fl layout_style_logo">
    	<a href="${url!}/admin/index.do"><img src="images/logo.png" /></a>
    </div>
    <div id="admin_nav" class="fl layout_style_nav">
        <ul class="font_shadow">
        	<#list topmenus as menu>
        		<li class="transition_background" url="childmenus.do?id=${menu.id?c}" index="${menu.url!}">${menu.name!}</li>
        	</#list>
        </ul>
    </div>
    <div id="admin_info" class="fr layout_info">
        <div   style="display: inline-block; padding-top: 10px;">
            <div class="btn-aimodel" onclick="showAiModelSelect()">
                <img class="ai-icon" src="http://192.168.1.7:8080/console/api/workspaces/current/model-providers/deepseek/icon_small/zh_Hans" />&nbsp; Deepseek-chat
            </div>
        </div>
        <div style="display: inline-block; padding: 8px;">

            当前用户: ${loginusername!} &nbsp;[<a href="logout.do">注销</a>] &nbsp;<a href="${url}" target="_blank">[网站首页]</a>
            <br/>
            <div id="index_time">loading...</div>
        </div>
   	    
    </div>
    <!--<div id="admin_face" class="pa" onclick="addStyle('css/themes/flat.css')"></div>-->
</div>

<!-- 二级导航 -->
<div id="admin_left" class="pa layout_style_left">
	<div class="admin_menu layout_nav_menu"> 
 	     
 	</div>
</div>
<div id="bread_crumb" class="pa">
	<ul class="bread_crumb_menu">
		<li><a href=""><i class="fa fa-home"></i> 主界面</a></li>
		<li class="bc_line"><i class="fa fa-chevron-right"></i></li>
		<li></li>
		<li class="bc_line hide"><i class="fa fa-chevron-right"></i></li>
		<li></li>
	</ul>
</div>
<!-- 内容区 -->
<div id="admin_right" class="pa" > 
	<div class="admin_content" onscroll="setScroll(this)">
	 
	</div> 
	<div class="loading_panel">
    </div>
</div>

<!-- AI模态框 -->
<div class="modal hide fade" id="aiModelModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-body">
                <div style="position: relative">
                    <!-- 搜索输入框 -->
                    <i class="fa fa-search"
                       style="font-size: 25px; position: absolute;top: 7px; left: 10px; color:#4e4747"></i>
                    <input type="text" class="form-control" id="searchInput" placeholder="输入模型名称进行搜索"
                           style="border-radius: 6px !important; font-size: 14px !important; height: 28px; padding-left: 40px; width: 90%;">
                </div>
                <hr style="margin: 0">

                <div class="ai-list">
                    <!-- 搜索结果列表 -->
                    <ul class="list-group mt-3" id="searchResults">
                        <!-- 这里会动态添加搜索结果 -->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript" src="lib/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="lib/bootstrap/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<!-- baidu tools -->
<script type="text/javascript" charset="utf-8" src="lib/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="lib/ueditor/ueditor.parse.js"></script>
<script type="text/javascript" src="lib/echarts/echarts-plain.js"></script>
<!-- Jquery plugins -->
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validator.js"></script>
<script type="text/javascript" src="js/zh_CN.js"></script>
<!-- ztree -->
<script type="text/javascript" src="lib/ztree/js/jquery.ztree.all.min.js"></script>


<!-- mrcms core -->
<script type="text/javascript" src="js/handlebars-v1.3.0.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/showtime.js"></script>
<script type="text/javascript" src="lib/fetch-event-source/fetch-event-source.js"></script>

<script type="text/javascript" src="js/ueditor-openai-sdk.js"></script>
<!-- highlight.js JS -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>-->

<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<!--<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>-->
<script src="
https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/dist/markdown-it.min.js
"></script>

<script type="text/javascript">
var editor = null;
//初始化菜单
$(function(){
	$('.admin_menu').load(uniqueUrl('childmenus.do?id=2'));
	$(".loading_panel").show();
	$('.admin_content').load('systeminfo.do',function(){
		$(".loading_panel").hide();
		$(".font_shadow li:first-child").click();
	});


    let aiModelList;
    $.ajax({
        url: '/admin/openai/models',
        type:"get",
        dataType:"json",
        data: {},
        success: function(json){
            aiModelList = json;
            showAiModels(json)   // 要确保分组顺序，才能正常渲染
            if(aiModelList.length > 0){
                setCurrentModel(aiModelList[0])
            }
        },
        error:function(){
            zoom.showMessageDialog("网络错误，请重新尝试!","消息提示",2500,function(){
                $("#password").focus();
            });
        }
    });

    // 监听搜索输入框的输入事件
    $('#searchInput').on('input', function () {
        const searchTerm = $(this).val().toLowerCase();
        const results = aiModelList.filter(item => item.model.toLowerCase().includes(searchTerm));

        // 清空搜索结果列表
        $('#searchResults').empty();
        showAiModels(results)
    });
    function showAiModels(results){
        // 添加搜索结果到列表
        let currentProvider;
        results.forEach(model => {
            if (!currentProvider) {//如果currentProvider为空，就添加一个h3标签
                currentProvider = model.provide;
                $('#searchResults').append('<h5>'+currentProvider+'</h5>');
            }
            if(currentProvider != model.provide){//如果当前provider和model的provider不同，就添加一个h3标签
                currentProvider = model.provide;
                $('#searchResults').append('<h5>'+currentProvider+'</h5>');
            }
            $('#searchResults').append('<li class="list-group-item" icon="'+model.icon+'" model="'+model.model+'" provide="'+model.provide+'"><img class="ai-icon" src="'+model.icon+'" />&nbsp; '+model.model+'</li>');
        });
    }

    $(".ai-list").on('click','.list-group-item',function(){
        $('#aiModelModal').modal('hide')
        let model = $(this).attr('model')
        let icon = $(this).attr('icon')
        let provide = $(this).attr('provide')

        setCurrentModel({
            model: model,
            provide: provide,
            icon: icon
        })
    })

    // 设置当前模型
    function setCurrentModel(model){
        let html = '<img class="ai-icon" src="'+model.icon+'" />&nbsp; '+model.model;
        window.aiModel = model;
        $(".btn-aimodel").html(html)
    }

});

function addStyle(stylePath) {
    var theme = document.getElementById("theme");
    theme.href = stylePath; 
}



</script>
<script type="text/javascript">
/* 选项卡滚动固定效果 */
function setScroll(dom){
	if(dom.scrollTop >= 5){ 
		$(".tab_bar").css("position","fixed");
		$(".tab_bar").css("z-index","1000");
		$(".tab_bar").css("top","85px");
		$(".tab_bar").css("right","22px");
		$(".tab_bar").css("left",dom.getBoundingClientRect().left+5+"px");
		
	}else{
		$(".tab_bar").css("position","static");
	} 
} 

/* 选项卡内容切换 */
function setTabContent(li){
	var index = $(li).index();
	$(".tab_bar ul li").each(function(){
		$(this).removeClass("tab_index"); 
	});
	$(li).addClass("tab_index"); 
	
	var item = $(".tab_content").children(".tab_item")[index];
	
	$(".tab_content").children(".tab_item").each(function(){
				this.style.display = "none";
    }); 
	item.style.display = "block" ;  
}
</script>

<div id="upload_ue" type="text/plain" desc="UEDITOR统一传图使用" style="display: none"></div>
</html>
